<template>
    <div class="topic-detail">
        <el-card class="detail-card">
            <div class="content-wrapper">
                <!-- 左侧图标 -->
                <div class="topic-icon">
                    <img :src="currentTopic?.imageUrl" alt="Java Logo">
                </div>

                <!-- 右侧内容 -->
                <div class="topic-content">
                    <!-- 标题 -->
                    <h1 class="title">{{ currentTopic?.categoryName }}</h1>

                    <!-- 描述文本 -->
                    <p class="description">
                        {{ currentTopic?.categoryName }}
                    </p>

                    <!-- 按钮组 -->
                    <div class="action-buttons">
                        <el-button type="primary" class="continue-btn">
                            继续刷题
                        </el-button>
                        <el-button class="share-btn">
                            <el-icon>
                                <Share />
                            </el-icon>
                            分享
                        </el-button>
                    </div>
                </div>
            </div>
        </el-card>
        <div style="margin-top:30px;">
            <div class="topic-page">
                <!-- 题目过滤组件 -->
                 <TopicFilter @search-result="handleSearch"/>
                <!-- 题目列表组件 -->
                <TopicList ref="topicListRef" />
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import TopicFilter from '@/components/baguwen/TopicFilter.vue';
import TopicList from '@/components/baguwen/TopicList.vue';
import { useTopicStores } from '@/stores/topicStores';
import { Share } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const topicStore =  useTopicStores();
const {getCategoryById} = topicStore;
const route = useRoute();
const {currentTopic} = storeToRefs(topicStore);
const topicListRef = ref<any>(null);

/**
 * 获取当前页面的分类信息
 */
onMounted(async () => {
    const categoryId:any = route.query.category_id;
    // url的query上有category_id并且currentTopic还没有值的时候，发起请求
    if (categoryId && !currentTopic.value?.id) {
        try {
            await getCategoryById(categoryId);
        } catch (error) {
            console.error('获取分类详情失败:', error);
            ElMessage.error('获取分类详情失败');
        }
    }
});

// 处理搜索结果
const handleSearch = (result:any) => {
  // 调用子组件的 handleSearchResult 方法
  topicListRef.value?.handleSearchResult(result)
}

</script>

<style scoped>
.topic-detail {
    padding: 20px;
}

.detail-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.content-wrapper {
    display: flex;
    gap: 24px;
    padding: 20px;
}

.topic-icon {
    flex-shrink: 0;
}

.topic-icon img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.topic-content {
    flex: 1;
}

.title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0 0 16px 0;
}

.description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.action-buttons {
    display: flex;
    gap: 12px;
}

.continue-btn {
    background-color: #1890ff;
    border-color: #1890ff;

    &:hover {
        background-color: #40a9ff;
        border-color: #40a9ff;
    }
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}

:deep(.el-card) {
    border: none;
}

:deep(.el-button) {
    height: 40px;
    padding: 0 24px;
}
</style>